<template>
  <div class="wrap">
    <!--    头部div-->
    <div class="header">
      {{ nowTime }}
    </div>
    <!--    下部容器div-->
    <div class="container">
      <!--左边模块-->
      <div class="leftpart">
        <!--左边上模块-->
        <div class="leftrighttopback">
         <Bar></Bar>
        </div>
        <!--左边模块分割-->
        <div style="width:100%;height:2%;"></div>
        <!--左边下模块-->
        <div class="leftrightbottomback"></div>
      </div>
 
      <!--中间模块-->
      <div class="centerpart"></div>
 
      <!--右边模块-->
      <div class="rtghtpart">
        <!--右边第一个模块-->
        <div class="leftrighttopback"></div>
        <!--右边模块分割-->
        <div style="width:100%;height:2%;"></div>
        <!--右边第二个模块-->
        <div class="leftrightbottomback"></div>
      </div>
 
    </div>
  </div>
 
</template>
<script>
 import Bar from '../../components/bar.vue'
 import Chu from '../../system/chubei'
export default {
  data() {
    return {
      nowTime: ''
    };
  },
  mounted() {
    this.getNowTime();
 
  },
  components:{
    Bar,
    Chu
  },
  methods: {
    getNowTime () {
      let speed = 1000
      let that = this
      let theNowTime = function () {
        that.nowTime = that.timeNumber()
      }
      setInterval(theNowTime, speed)
    },
    timeNumber () {
      let today = new Date()
      let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
      let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
      return date + '  ' + time
    },
    twoDigits (val) {
      if (val < 10) return '0' + val
      return val
    },
  },
}
</script>
 
<style scoped>
.wrap {
  background: #0d325f;
  /* background: url("../../../assets/img/visualMonitoringlogo/wh_singleback.png"); */
  /* background-size: cover; */
  /* width: 100%; */
  /* height: 50vw; */
  height: 100vh;
  width: 100vw;
  border: 2px dashed #aaa;
}
.header {
  font-size: 1vw;
  height: 8%;
  color: #ffffff;
  text-align: right;
  line-height:4vw;
  border: 2px dashed #aaa;
}
.container {
  margin: 0 0.5vw 0.5vw;
  display: flex;
  justify-content: space-between;
  height: 92%;
  border: 2px dashed #aaa;
}
.leftpart{
 
  float:left;
  width:28%;
  height:98%;
  border: 2px dashed #aaa;
}
.centerpart{
  float:left;
  width:44%;
  height:98%;
  border: 2px dashed #aaa;
}
.rtghtpart{
  float:left;
  width:28%;
  height:98%;
  border: 2px dashed #aaa;
}
.leftrighttopback {
  width:100%;
  height:42%;
  background-color: rgba(46, 66, 96, 0.4);
  border: 2px dashed #aaa;
  /* overflow: hidden; */
}
.leftrightbottomback {
  width:100%;
  height:56%;
  background-color: rgba(46, 66, 96, 0.4);
  border: 2px dashed #aaa;
}
 
</style>